<html style="height:100%">
<head></head>
<body style="height:100%">
<div style="padding: 10px;height:95%;">
	<div style="height: 25%;">
		<form id="menuForm" method="post" action="menu/queryMenus">
			<table cellpadding="8">
				<tbody>
					<tr>
						<td>菜单名</td>
						<td><input class="easyui-textbox" type="text" name="text" /></td>
						<td>菜单url</td>
						<td><input class="easyui-textbox" type="text" name="url" />
						</td>
						<td>父菜单ID</td>
						<td><input class="easyui-textbox" type="text" name="parentId" />
						</td>
					</tr>
					<tr>
						<td>状态</td>
						<td><input class="easyui-textbox" type="text" name="status" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
		<div style="text-align: left; padding: 5px">
			<a id="menuSearchSubmit" href="javascript:void(0)"
				class="easyui-linkbutton mediumButton">查询</a>
		</div>
	</div>
	<script type="text/javascript">
		$(function() {


			var deleteUrl = "";

			$("#menuSearchSubmit").click(function() {
				refreshGrid();
			});
			//点击编辑菜单
			$("#menuEdit").click(function() {
				$("#menuFormEdit").form('clear');
				
				var selected = $("#menuGrid").datagrid('getSelected');
				if(selected == null) {
					alert("请先选择菜单");
					return;
				}
				
				$("#menuFormEdit").attr("action", $(this).attr("postUrl"));
				$('#menuFormDlg').dialog({
					"iconCls" : "icon-edit",
					"title" : "菜单修改"
				});
				$('#menuFormDlg').dialog('open');

				var params = new Object();
				params.id = selected.id;

				BaseJs.setFormByUrl("#menuFormEdit", params);
			});
			//初始化页面
			function init() {
				$("#menuFormEdit").form('clear');
				$("#menuForm").form('clear');

				refreshGrid();
			}

			//根据form里面的信息获取并填充grid
			function refreshGrid() {
				BaseJs.formChangeGrid("#menuForm", "#menuGrid");
			}

			$("#menuAdd").click(function() {
				$("#menuFormEdit").form('clear');
				$("#menuFormEdit").attr("action", $(this).attr("postUrl"));
				$('#menuFormDlg').dialog({
					"iconCls" : "icon-add",
					"title" : "菜单新增"
				});
				$('#menuFormDlg').dialog('open');
			});

			$("#menuDelete").click(function() {
				var selected = $("#menuGrid").datagrid('getSelected');
				if(selected == null) {
					alert("请先选择菜单");
					return;
				}
				var params = new Object();
				params.id = selected.id;
				BaseJs.ajax($(this).attr('postUrl'), params, function() {
					refreshGrid();
					alert("删除菜单成功");
				})

			});
			//修改的弹出框按提交
			$("#menuSubmitEdit").click(function() {
				BaseJs.submitForm("#menuFormEdit", function(rData) {
					//修改完重新查询
					$("#menuSearchSubmit").click();
					$('#menuFormDlg').dialog('close');
				});

			});
		});
	</script>
	<div style="height: 75%">
		<div id="menuToolbar">
			<a id="menuAdd" postUrl="menu/addUpdateMenu"
				href="javascript:void(0)" class="easyui-linkbutton"
				iconcls="icon-add" plain="true">新增菜单</a> <a id="menuEdit"
				postUrl="menu/addUpdateMenu" href="javascript:void(0)"
				class="easyui-linkbutton" iconcls="icon-edit" plain="true">编辑菜单</a>
			<a id="menuDelete" postUrl="menu/deleteMenu"
				href="javascript:void(0)" class="easyui-linkbutton"
				iconcls="icon-remove" plain="true">删除菜单</a>
		</div>

		<div id="menuFormDlg" class="easyui-dialog" title="菜单新增"
			data-options="iconCls:'icon-add',closed: true"
			style="width: 400px; height: 400px; padding: 10px; text-align: center;">
			<!-- 弹出框用来增加和编辑-->
			<form id="menuFormEdit" method="post" action=""
				loadAction="menu/getMenu">
				<table align="center" cellpadding="8"> 
					<tr>
						<td>菜单名</td>
						<td><div>
								<input class="easyui-textbox"  type="text" name="text" />
							</div></td>
					</tr>
					<tr>
						<td>菜单url</td>
						<td><div>
								<input class="easyui-textbox" type="text" name="url" />
							</div></td>
					</tr>
					<tr>
						<td>父菜单ID</td>
						<td><div>
								<input class="easyui-textbox" type="text" name="parentId" />
							</div></td>
					</tr>
					<tr>
						<td>状态</td>
						<td><div><input class="easyui-textbox" type="text" name="status" /></div>
						</td>
					</tr>
				</table>
				<input type="hidden" name="id">
			</form>

			<div style="text-align: center; margin: 10px">
				<a id="menuSubmitEdit" href="javascript:void(0)"
					class="easyui-linkbutton mediumButton">确定</a> &nbsp; <a
					href="javascript:void(0)" class="easyui-linkbutton mediumButton"
					onclick=" $('#menuFormDlg').dialog('close');">取消</a>
			</div>
		</div>
		<table id="menuGrid" toolbar="#menuToolbar" class="easyui-datagrid"
			title="菜单显示" style="width: 100%; height: 100%;"
			data-options="singleSelect:true,method:'post',fitColumns : true">
			<thead>
				<tr>
					<th data-options="field:'id',width:50,align:'center'">菜单ID</th>
					<th data-options="field:'text',width:100,align:'center'">菜单名</th>
					<th data-options="field:'url',width:100,align:'center'">菜单url</th>
					<th data-options="field:'parentId',width:100,align:'center'">父菜单ID</th>
					<th data-options="field:'status',width:100,align:'center'">状态</th>
				</tr>
			</thead>
		</table>
	</div>
</div>
</body>
</html>